<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL - shadows</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="uiContainer">
        <div id="ui"></div>
    </div>
</body>
</html>
<script src="../../resources/webgl-lessons-ui.js"></script>
<script src="../../resources/webgl-utils.js"></script>
<script src="../../resources/m4.js"></script>
<script src="../../resources/primitives.js"></script>
<script id="vertex-shader-3d" type="x-shader/x-vertex">
    //顶点着色器
    attribute vec4 a_position;
    attribute vec2 a_texcoord;

    uniform mat4 u_projection;
    uniform mat4 u_view;
    uniform mat4 u_world;

    varying vec2 v_texcoord;
    void main(){
        gl_Position = a_position * u_view * u_world * u_projection;
        //把纹理坐标传给片元着色器
        v_texcoord = a_texcoord;
    }
</script>
<script id="fragment-shader-3d" type="x-shader/x-fragment">
    //片元着色器
    precision mediump float;

    //从顶点着色器传来的
    varying vec2 v_texcoord;

    uniform vec4 u_colorMult;
    uniform sampler2D u_texture;

    void main(){
        gl_FragColor = texture2D(u_texture, v_texcoord)* u_colorMult;
    }
</script>
<script>
    'use strict';

    function main() {
        const canvas = document.getElementById('#canvas');
        const gl =canvas.getContext('webgl');
        if(!gl){
            return;
        }
        // 设置 GLSL 程序
        // 编译着色器、链接程序、查找 locations
        const textureProgramInfo = webglUtils.createProgramInfo(gl,['vertex-sahder-3d','fragment-shader-3d']);
        
        const sphereBufferInfo = primitives.createSphereBufferInfo(gl, 1, 12, 6);
        const planeBufferInfo = primitives.createPlaneBufferInfo(gl, 20, 20, 1, 1);

        // 创建一个 8x8 棋盘纹理
        const checkerboardTexture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, checkerboardTexture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, 8, 8, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, new Uint8Array([
            0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC,
            0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF,
            0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC,
            0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF,
            0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC,
            0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF,
            0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC,
            0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF, 0xCC, 0xFF,
        ]));
        gl.generateMipmap(gl.TEXTURE_2D);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

        //每个物体的uniforms
        const planeUniforms={
            u_colorMult:[0.5,0.5,1,1],//浅蓝色
            u_texture:checkerboardTexture,
            u_world:m4.translation(0,0,0)
        };
        const sphereUniform ={
            u_colorMult:[1,0.5,0.5,1],//粉红色
            u_texture:checkerboardTexture,
            u_world:m4.translation(2,3,4)
        };
        function drawScene(){
            
        }
    }
</script>